<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../js/vue/vue.global.js"></script>
		<script src="../../js/element/index.js"></script>
		<!-- 导入网路请求库 -->
		<script src="../../js/axios.min.js"></script>
		<link rel="stylesheet" href="../../css/element/index.css" />
		<!-- 引入参数处理的工具包，可以将对象进行序列化处理 -->
		<script src="../../js/qs.min.js"></script>
		<style>
		  .avatar-uploader .el-upload {
		    border: 1px dashed #d9d9d9;
		    border-radius: 6px;
		    cursor: pointer;
		    position: relative;
		    overflow: hidden;
		  }
		  .avatar-uploader .el-upload:hover {
		    border-color: #409EFF;
		  }
		  .avatar-uploader-icon {
		    font-size: 28px;
		    color: #8c939d;
		    width: 178px;
		    height: 178px;
		    line-height: 178px;
		    text-align: center;
		  }
		  .avatar {
		    width: 178px;
		    height: 178px;
		    display: block;
		  }
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 顶部搜索框 -->
			<el-form :inline="true" :model="searchUser" class="demo-form-inline">
				<el-form-item label="用户名">
					<el-input v-model="searchUser.username" placeholder="用户名"></el-input>
				</el-form-item>
				<el-form-item label="家庭住址">
					<el-input v-model="searchUser.useraddress" placeholder="家庭住址"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getUserInfo()">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="addUserInfo()">新增</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="warning" @click="">清空</el-button>
				</el-form-item>
			</el-form>
			<!-- 表格展示 -->
			<el-table ref="singleTable" :data="userinfoes" highlight-current-row @current-change="handleCurrentChange"
				style="width: 100%">
				<el-table-column type="index" width="50">
				</el-table-column>
				<el-table-column property="username" label="用户名" width="120">
				</el-table-column>
				<el-table-column property="useraddress" label="家庭住址">
				</el-table-column>
				<el-table-column property="usertel" label="联系方式" width="120">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="editUserInfo(scope.row)">
							<i class="el-icon-edit"></i>编辑
						</el-button>
						<el-button size="mini" type="danger" @click="deleteUserInfo(scope.row.id)">
							<i class="el-icon-delete"></i>删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页组件 -->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="currentPage" :page-sizes="[1, 2, 5, 10]" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
			<!-- 新增、修改功能的dialog对话框 -->
			<el-dialog title="用户信息" :visible.sync="dialogFormVisible ">
				<el-form :model="eidtUserInfoBean" :rules="rules" ref="eidtUserInfoBean">
					<el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
						<el-input v-model="eidtUserInfoBean.username" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="密码" :label-width="formLabelWidth" prop="userpwd">
						<el-input v-model="eidtUserInfoBean.userpwd" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="家庭住址" :label-width="formLabelWidth" prop="useraddress">
						<el-input v-model="eidtUserInfoBean.useraddress" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="联系方式" :label-width="formLabelWidth" prop="usertel">
						<el-input v-model="eidtUserInfoBean.usertel" autocomplete="off"></el-input>
					</el-form-item>	
					<el-form-item label="头像上传" :label-width="formLabelWidth" prop="usertel">
						<el-upload
						  class="avatar-uploader"
						  action="#"
						  :show-file-list="false"
						  :http-request="imgUpload"
						  :before-upload="beforeUpload">
						  <img v-if="eidtUserInfoBean.imgsrc" :src="eidtUserInfoBean.imgsrc" class="avatar">
						  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>	
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveUserInfo('eidtUserInfoBean')">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</body>
	<script>
		var app = new Vue({
		el: "#app",
		data: {
			// 顶部条件搜索用到的数据
			searchUser: {
				username: "",
				useraddress: ""
			},
			// 表格中的用户信息
			userinfoes: [],
			// 控制新增、修改的dialog框的属性
			dialogFormVisible: false,
			// 新增、修改需要用到的数据 
			eidtUserInfoBean: {
				id: "",
				username: "",
				userpwd: "",
				useraddress: "",
				usertel: "",
				imgsrc:""
			},
			formLabelWidth: '100px',
			// 表单的校验规则
			rules: {
				username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					},
					{
						min: 3,
						max: 5,
						message: '长度在 3 到 5 个字符',
						trigger: 'blur'
					}
				],
				userpwd: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}

				],
				useraddress: [{
						required: true,
						message: '请输入家庭住址',
						trigger: 'blur'
					}

				],
				usertel: [{
						required: true,
						message: '请输入联系方式',
						trigger: 'blur'
					}

				]
			},
			// 分页相关的参数
			currentPage: 1,
			pageSize: 5,
			total: 400,
			isShow:false


		},
		methods: {
			getUserInfo: function(pageIndex, currentSize) {
				if (!pageIndex) {
					pageIndex = this.currentPage
				}
				if (!currentSize) {
					currentSize = this.pageSize
				}
				var that = this
				var params = Qs.stringify(this.searchUser)
				params += "&pageCurrent=" + pageIndex + "&pageSize=" + currentSize
				var url = "http://localhost:8086/api/user?" + params
				console.log(url)
				axios.get(url)
					.then(function(response) {
						console.log(response)
						that.userinfoes = response.data.list
						that.currentPage = response.data.pageNum
						that.pageSize = response.data.pageSize
						that.total = response.data.total
					})
					.catch(function(error) {

					})
			},
			editUserInfo: function(userinfoByRow) {
				console.log(userinfoByRow)
				this.eidtUserInfoBean = userinfoByRow
				this.dialogFormVisible = true


			},
			deleteUserInfo: function(userId) {
				var that = this
				console.log(userId)
				axios.delete("http://localhost:8086/api/user/" + userId)
					.then(function() {
						console.log("删除成功")
						that.getUserInfo()

					})
			},
			//新增、修改时保存数据的方法
			saveUserInfo: function(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						var that = this
						var params = Qs.stringify(this.eidtUserInfoBean)
						// 判断用户的id是否有值，若有值，则执行修改操作
						if (this.eidtUserInfoBean.id != '' && this.eidtUserInfoBean.id != undefined) {
							console.log("这里是修改方法" + this.eidtUserInfoBean.id)
							axios.put("http://localhost:8086/api/user", this.eidtUserInfoBean)
								.then(function(response) {
									that.dialogFormVisible = false
									that.getUserInfo()
								}).catch(function(error) {
									console.log(error)
								})
						} else {
							console.log("这里是新增方法")
							// 若userid的值不存在，则执行新增操作
							axios.post("http://localhost:8086/api/user", params)
								.then(function(response) {
									that.dialogFormVisible = false
									that.getUserInfo()
								}).catch(function(error) {
									console.log(error)
								})
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			addUserInfo: function() {
				this.eidtUserInfoBean = {}
				this.dialogFormVisible = true
			},

			handleCurrentChange(val) {
				this.currentRow = val;
			},
			// 分页相关的方法
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				// 调用查询操作，将当前的页码，与每页要显示的记录条数传过去
				this.getUserInfo(this.currentPage, val)
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.getUserInfo(val, this.pageSize)
			},
			// 开始上传前验证
			beforeUpload: function(file) {
				// 验证文件类型
				var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
				var extension = testmsg === 'jpg' || testmsg === 'png' || testmsg === 'gif'
				if (!extension) {
					this.$message({
						message: '上传文件只能是jpg/png/gif格式!',
						duration: 1000,
						showClose: true,
						type: 'warning'
					})
				}
				return extension
			},
			imgUpload:function(param, type) {
				var that=this
                var formData = new FormData()
                formData.append('image', param.file);
                axios.post('http://localhost:8086/upload', formData).then(function (res) {
                    console.log(res);
					that.eidtUserInfoBean.imgsrc=res.data
					console.log(that.eidtUserInfoBean)
					that.$forceUpdate()
					
                });
				
				
			}
		}
		})
	</script>
</html>
